<template>
  <ApolloQuery :query="require('@/graphql/Query/Product.graphql')" :variables="{ id }">
    <template slot-scope="{ result: { loading, error, data } }">
      <!-- Loading -->
      <div v-if="loading" class="loading apollo">Loading...</div>

      <!-- Error -->
      <div v-else-if="error" class="error apollo">An error occured</div>

      <!-- Result -->
      <div v-else-if="data" class="result apollo grey lighten-4">
        <!-- <v-parallax :src="data.product.covers[0] | withCDN" height="300">
          <v-layout align-start justify-center column>
            <div class="pa-3" style="width: 100%; background-color: rgba(0, 0, 0, 0.3);">
              <h1 class="display-2 font-weight-thin mb-3">{{ data.product.name }}</h1>
              <h4 class="subheading">{{ data.product.description }}</h4>
            </div>
          </v-layout>
        </v-parallax> -->
        <!-- <v-img :src="data.product.covers[0] | withCDN" :aspect-ratio="4/3">
          <v-layout align-end justify-start row fill-height>
            <div class="pa-3" style="width: 100%; background-color: rgba(0, 0, 0, 0.3);">
              <h1 class="display-2 font-weight-thin mb-3">{{ data.product.name }}</h1>
              <h4 class="subheading">{{ data.product.description }}</h4>
            </div>
          </v-layout>
        </v-img> -->
        <!-- <v-container :style="$vuetify.breakpoint.smAndDown ? 'padding: 0;' : ''">
          <v-layout>
            <carousel-3d autoplay :autoplayTimeout="5000" autoplayHoverPause controlsVisible :space="365" :disable3d="true" :border="0" :style="$vuetify.breakpoint.smAndDown ? 'margin-top: 0;' : ''">
              <slide v-for="(item, i) in data.product.covers" :key="i" :index="i">
                <template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
                  <v-img :src="item | withCDN" :aspect-ratio="4/3">
                  </v-img>
                </template>
              </slide>
            </carousel-3d>
          </v-layout>
        </v-container> -->
        <v-container grid-list-xs :style="$vuetify.breakpoint.smAndDown ? 'padding: 0;' : ''">
          <v-layout style="overflow-x: scroll;">
            <v-flex v-for="(item, index) in data.product.covers" :key="index">
              <v-img :width="300" :src="item | withCDN" :aspect-ratio="4/3"></v-img>
            </v-flex>
          </v-layout>
        </v-container>
        <v-container grid-list-lg>
          <v-layout column>
            <p class="headline mb-3">{{ data.product.name }}</p>
            <p class="subheading">{{ data.product.description }}</p>
            <v-flex>
              <v-chip label color="pink" text-color="white">
                <v-icon left>label</v-icon>{{ data.product.category.name }}
              </v-chip>
            </v-flex>
            <v-flex v-for="(item, index) in data.product.contents" :key="index" xs12>
              <p v-if="item.contentType === 'TEXT'" class="body-1">{{ item.content }}</p>
              <v-img v-else :src="item.content | withCDN" :aspect-ratio="4/3"></v-img>
            </v-flex>
          </v-layout>
          <v-btn fixed fab dark small color="pink" bottom right>
            <v-icon dark>favorite</v-icon>
          </v-btn>
        </v-container>
      </div>

      <!-- No result -->
      <div v-else class="no-result apollo">
        <Skeleton></Skeleton>
      </div>
    </template>
  </ApolloQuery>
</template>

<script>
import { Carousel3d, Slide } from 'vue-carousel-3d'

import Skeleton from '@/components/Skeleton'

export default {
  name: 'detail',
  data () {
    return {
    }
  },

  components: {
    Carousel3d,
    Slide,
    Skeleton
  },

  props: [
    'id'
  ]
}
</script>

<style>
</style>
